<template>
  <div class="receive">

    <div v-show="$route.name ==='allOrder'" class="receive-content">
      <div class="tabs-item-head">
        <div>
          <dgg-icon :icon-class="searchState? 'icon_screen_selected':'icon_screen'" class="dgg-search" svg-width="15px"
            svg-height="15px" @click="searchState=!searchState" />
          <dgg-input v-model="searchData" :maxlength="30" oninput="this.value=this.value.replace(/\s/g,'')"
            onkeyup="if(value.length>30)value=value.slice(0,30)" class="search" placeholder="地区/产品/合同/客户/生产单号">
            <dgg-icon slot="prefix" icon-class="dgg-search" svg-width="15px" svg-height="15px" />
          </dgg-input>
          <dgg-button v-if="!searchState" plain class="receive-button default-btn-with" @click="searchClick">
            搜 索
          </dgg-button>
          <dgg-button v-if="!searchState" plain class="dgg-button-nocolor default-btn-with" @click="resetClick">
            重 置
          </dgg-button>
          <div class="fr receive-radio"></div>
          <el-tooltip effect="dark" popper-class="grab-tooltip" content="请在24小时内接单，否则订单将退回且影响您的排名" placement="top">
            <div class="fr icon_info">
              <dgg-icon icon-class="icon_info" svg-width="15px" svg-height="30px" />
            </div>
          </el-tooltip>
        </div>

        <div v-if="searchState" class="tabs-item-query">
          <dgg-query ref="query" :query-list="queryList" :can-export="false" clear-value @resetEvent="resetQuery"
            @search="search" @changeEvent="queryEmit" />
        </div>
      </div>
      <!-- 表格 -->
      <div v-if="activeData === '1'" class="receive-body">
        <dgg-edit-table :data="dataList.records" :columns="columns" :request-data-api="get_order_model_by_status"
          :params="params" :page-info="dataList.totalPage" />
      </div>
    </div>
    <el-dialog :visible.sync="singleBackCodeDialog" title="拒接订单" width="400px"
      @close="singleBackCodeForm.code='';singleBackCodeForm.remark=''">
      <el-form ref="form" :model="singleBackCodeForm">
        <el-form-item label="拒接原因：">
          <el-select v-model="singleBackCodeForm.code" placeholder="请选择拒接原因">
            <el-option v-for="item in singleBackCodeOption" :label="item.name" :value="item.code" :key="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="拒接备注：" class="refuse-memo">
          <el-input v-model="singleBackCodeForm.remark" type="textarea" :autosize="{ minRows: 4, maxRows: 4}"
            show-word-limit maxlength="500" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="singleBackCodeDialog = false;singleBackCodeForm.code='';singleBackCodeForm.remark=''">取 消
        </el-button>
        <el-button type="primary" @click="refusedOrder">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="receiveDialog" title="接收订单" width="400px" class="receiveDialog-alert"
      @close="receiveForm.code= '';searchStorePhone='';choosePeopleData={} ">
      <el-form :model="receiveForm">
        <el-form-item label="生产单编号：">
          <p> {{ this.receiveItem.scOrderNo?this.receiveItem.scOrderNo:'--' }}</p>
        </el-form-item>
        <el-form-item label="合同编号：">
          <p>{{ this.receiveItem.contractNo?this.receiveItem.contractNo:'--' }}</p>
        </el-form-item>
        <el-form-item label="项目负责人：" class="choose-people">
          <template v-if="Object.keys(choosePeopleData).length>0">
            <span class="show-transactor-people">
              <img :src="choosePeopleData.photoUrl?choosePeopleData.photoUrl:taskTransactorImg"
                :onerror="errorTaskTransactorImg" alt="">
              <dgg-icon icon-class="dgg_delete" svg-width="14px" svg-height="14px" sdafsadfasdffas
                @click="deleteChoosePeople" />
            </span>
            <span class="show-transactor-name">{{ choosePeopleData.label }}</span>
          </template>
          <dgg-icon v-if="Object.keys(choosePeopleData).length<1" icon-class="dgg_add" svg-width="18px"
            svg-height="18px" class="addTransactor" @click="showChoosePeopleDialog = !showChoosePeopleDialog" />
          <!-- 显示接收弹窗选择 -->
          <div v-if="showChoosePeopleDialog" class="project-people-dialog">
            <div class="dgg-order-search">
              <dgg-input v-model="searchStorePhone" class="search-input" placeholder="输入成员姓名或手机号搜索" maxlength="30"
                @input="searchStorePhone=searchStorePhone.replace(/\s/g,'')" @keyup.enter.native="$event.target.blur"
                @blur="receiveOrderDialogFn">
                <dgg-icon slot="prefix" icon-class="dgg-search" />
              </dgg-input>
            </div>
            <!-- 搜索 end -->
            <ul v-if="receiveOption.length>0" class="infinite-list" style="overflow:auto">
              <li v-for="(item,index) in receiveOption" :key="index"
                :class="{'active-product-list':item.userId == chooseStoreId}" class="infinite-list-item"
                @click="chooseStoreData(item)">
                <span>{{ item.label?item.label:'--' }}</span>
                <span>{{ item.value?item.phone:'--' }}</span>
              </li>
            </ul>
            <p v-if="receiveOption.length<1" class="no-data">暂无数据！</p>
          </div>
          <!-- 办理人选择框 start -->

          <!-- <el-select
            v-model="receiveForm.code"
            placeholder="请选择项目管理人"
          >
            <el-option
              v-for="item in receiveOption"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            />
          </el-select> -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="receiveDialog = false;receiveForm.code= ''">取 消</el-button>
        <el-button type="primary" @click="receiveOrder">确 定</el-button>
      </span>
    </el-dialog>
    <router-view />
  </div>

</template>

<script>
  // 加载页
  // eslint-disable-next-line no-unused-vars
  import { mapState, mapActions } from "vuex";
  import moment from "moment";
  import taskTransactorImg from "@/assets/images/image_portrait_fault.png";

  export default {
    name: "Receive",
    components: {},
    data() {
      return {
        taskTransactorImg: taskTransactorImg, // 办理人默认头像
        errorTaskTransactorImg: 'this.src="' + taskTransactorImg + '"', // 默认图地址
        showChoosePeopleDialog: false,
        chooseStoreId: "",
        choosePeopleData: {}, // 选定人的信息
        searchStorePhone: "",
        receiveForm: {
          code: ""
        },
        receiveDialog: false,
        receiveOption: [],
        receiveItem: "",
        singleBackCodeForm: {
          code: ""
        },
        activeData: "1",
        radioArray: [
          {
            label: "订 单",
            value: "1"
          },
          {
            label: "产 品",
            value: "2"
          }
        ],
        activeName: "first",
        searchState: false,
        columns: [
          {
            prop: "productName",
            width: "175",
            label: "业务产品",
            type: "isrender",
            render: (h, params) => {
              console.log(
                JSON.parse(JSON.stringify(params)),
                "paramsparamsparamsparamsparamsparamsparamsparamsparamsparams++++++++++"
              );
              let _iconName = "noicon_order_icon";
              if (params.row.businessProductCode === "BUS_YT_FL_FS") {
                _iconName = "order_icon_nonlitigation";
              }
              if (params.row.businessProductCode === "BUS_YT_FL_MSSS") {
                _iconName = "icon_civil_order";
              }
              if (params.row.businessProductCode === "BUS_YT_FL_XZSS") {
                _iconName = "order_icon_litigation";
              }
              if (params.row.businessProductCode === "BUS_YT_FL_XSSS") {
                _iconName = "order_icon_criminal";
              }
              if (params.row.businessProductCode === "BUS_YT_FL_FLGW") {
                _iconName = "order_icon_law";
              }
              return (
                <div>
                  <div>
                    <dgg-icon
                      class="fl"
                      icon-class={_iconName}
                      style="margin-right:10px;"
                      svg-width="48px"
                      svg-height="23px"
                    />
                  </div>
                  <span class="dgg-text-ellip" style="display: block;">
                    {params.row.productName}
                  </span>
                </div>
              );
            }
          },
          {
            prop: "scOrderNo",
            label: "生产单编号",
            width: "140",
            type: "isrender",
            render: (h, params) => {
              return (
                <div
                  style="color:#10BBB8;cursor: pointer;"
                  class="dgg-text-ellip"
                  onClick={e => {
                    // this.ruoterJump({ name: 'receiveDetails', params: { id: params.row.id }});
                  }}
                >
                  {params.row.scOrderNo}
                </div>
              );
            }
          },
          { prop: "customerName", width: "160", label: "客户名称" },
          { prop: "region", width: "100", label: "办理地区" },
          { prop: "commission", label: "产品属性" },
          { prop: "remark", label: "订单状态",},
          { prop: "remark", label: "属性状态",},
          {
            label: "操作",
            width: "150",
            type: "isrender",
            render: (h, params) => {
              if (!params.row.isReject) {
                return (
                  <div>
                    <dgg-button
                      plain
                      style="width:50px"
                      class="receive-button"
                      onClick={e => {
                        this.receiveOrderDialog(params.row);
                      }}
                    >
                      接 收
                  </dgg-button>
                  </div>
                );
              } else {
                return (
                  <div>
                    <dgg-button
                      plain
                      style="width:50px"
                      class="receive-button"
                      onClick={e => {
                        this.receiveOrderDialog(params.row);
                      }}
                    >
                      接 收
                  </dgg-button>
                    <dgg-button
                      plain
                      style="width:50px;margin-left:10px;"
                      class="dgg-button-nocolor"
                      onClick={e => {
                        this.refuseConfirm(params.row);
                      }}
                    >
                      拒 接
                  </dgg-button>
                  </div>
                );
              }
            }
          }
        ],
        allSearch: {},
        searchData: "",
        paramsData: {},
        paramsSearchData: {},
        singleBackCodeDialog: false, // 拒接类型弹窗
        singleBackCodeOption: [],
        refusedOrderRow: "" // 拒接订单
      };
    },
    computed: {
      ...mapState(["personMsg"]),
      ...mapState("orderModule", [
        "areaOptions",
        "productOptions",
        "orderTeamOptions"
      ]),
      ...mapState("receiveModule", ["dataList", "commodityOptions"]),
      params() {
        return {
          orderStatusList: ["QDS_SC_ORDER_STATUS_CODE07"],
          ...this.paramsData
        };
      },
      queryList() {
        return [
          {
            field: "businessProductCode",
            type: "select",
            label: "业务",
            width: "220px",
            value: "",
            options:
              [
                ...[{ label: "全部", value: "" }],
                ...this.productOptions.map(item => {
                  return {
                    value: item.code,
                    label: item.name
                  };
                })
              ] || []
          },
          {
            field: "productId",
            type: "select",
            label: "产品",
            value: "",
            width: "220px",
            options:
              [
                ...[{ label: "全部", value: "" }],
                ...this.commodityOptions.map(item => {
                  return {
                    value: item.id,
                    label: item.name
                  };
                })
              ] || []
          },
          {
            field: "regionCode",
            type: "select",
            label: "地区",
            width: "220px",
            value: "",
            options:
              this.areaOptions.map(item => {
                return {
                  value: item.code,
                  label: item.name
                };
              }) || []
          },
          {
            label: "佣金",
            width: "220px",
            children: [
              {
                field: "commissionLow",
                type: "input",
                label: "test1",
                width: "97px",
                placeholder: "最低",
                value: ""
              },
              {
                field: "commissionHight",
                type: "input",
                label: "test1",
                width: "97px",
                placeholder: "最高",
                value: ""
              }
            ]
          }
        ];
      }
    },
    watch: {},
    async mounted() { },
    activated() {
      //
    },
    created() {
      //
    },
    beforeDestroy() {
      //
    },
    methods: {
      ...mapActions(["ruoterJump"]),
      ...mapActions("receiveModule", [
        "get_order_model_by_status",
        "find_product",
        "receive_order",
        "refused_order",
        "refuse_code_tree_book_list"
      ]),
      ...mapActions("teamSettingModule", ["get_store_user"]),
      resetQuery() {
        this.searchData = "";
      },
      refuseConfirm(row) {
        this.$confirm(
          "该订单根据您的行为及数据进行匹配，建议不要轻易拒接订单，拒接订单将会影响您的接单排名分数哟~~",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消"
            // type: 'warning'
          }
        )
          .then(() => {
            this.showSingleBackCodeDialog(row);
          })
          .catch(() => { });
      },
      receiveOrderDialog(params) {
        this.receiveItem = params;
        this.receiveDialog = true;
        this.receiveOrderDialogFn();
      },
      async receiveOrderDialogFn() {
        if (this.personMsg.storeId) {
          const res = await this.get_store_user({
            storeId: this.personMsg.storeId,
            currentStatus: "EMPLOYEE_STATUS_1",
            userOrPhone: this.searchStorePhone, // 用户名或手机号
            merCheck: 0,
            isCertification: 1
          });
          if (res.code === 200) {
            const list = [];
            res.data.list.forEach((item, inx) => {
              if (item.currentStatus === "EMPLOYEE_STATUS_1") {
                item.value = item.userId;
                item.label = item.userName;
                list.push(item);
              }
            });
            this.receiveOption = list;
          } else {
            this.$notify({
              message: res.message,
              type: "error",
              customClass: "dgg-tip-msg"
            });
          }
        }
      },
      // 选择项目人
      chooseStoreData(item) {
        console.log(item);
        this.$nextTick(() => {
          this.receiveForm.code = item.value;
          this.showChoosePeopleDialog = false;
          this.choosePeopleData = item;
        });
      },
      // 删除选择的项目人
      deleteChoosePeople() {
        this.$nextTick(() => {
          this.choosePeopleData = "";
          this.receiveForm.code = "";
        });
      },
      async receiveOrder() {
        if (this.receiveForm.code.length === 0) {
          this.$notify({
            message: "请选择项目负责人",
            type: "error",
            customClass: "dgg-tip-msg"
          });
          return;
        }
        const params = this.receiveItem;
        const res = await this.receive_order({
          projectManagerId: this.receiveForm.code,
          id: params.id
        });
        if (res.code === 200) {
          this.receiveDialog = false;
          this.$message.success("接单成功");
          this.receiveForm.code = "";
          this.searchClick();
          this.$bus.$emit("receiveRefresh");
        } else {
          this.$notify({
            message: res.message,
            type: "error",
            customClass: "dgg-tip-msg"
          });
        }
      },
      async showSingleBackCodeDialog(params) {
        const res = await this.refuse_code_tree_book_list({
          code: "QDS_FLSC_REFUSED_RECEIVE",
          type: 1,
          level: 1
        });
        if (res.code === 200) {
          this.singleBackCodeOption = res.data;
          this.singleBackCodeDialog = true;
          this.refusedOrderRow = params;
        }
      },
      async refusedOrder() {
        if (this.singleBackCodeForm.code.length === 0) {
          this.$message.error("请选择拒接原因");
          return;
        }
        const res = await this.refused_order({
          id: this.refusedOrderRow.id,
          refusedReceiveCode: this.singleBackCodeForm.code,
          refusedReceiveReamrk: this.singleBackCodeForm.remark
        });
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.searchClick();
          this.singleBackCodeDialog = false;
        } else {
          this.$notify({
            message: res.message,
            type: "error",
            customClass: "dgg-tip-msg"
          });
        }
      },
      change(data) {
        if (this.$route.name === "receive") {
          this.ruoterJump({ name: "receiveDetails" });
        } else {
          this.ruoterJump({ name: "receive" });
        }
        this.activeData = data;
      },
      async queryEmit(val, field) {
        if (field === "businessProductCode") {
          //
          await this.find_product({
            proType: val
          });
          this.$refs["query"].resetFieldValue("productId");
        }
      },
      search(val) {
        this.paramsSearchData = val;
        this.paramsData = this.paramsSearchData;
      },
      searchClick() {
        this.paramsData = {
          customerOrScOrderNoOrContractNo: this.searchData
        };
      },
      resetClick() {
        this.searchData = "";
        this.paramsData = {};
      }
    }
  };
</script>

<style lang="less">
  @import "~@/assets/less/main.less"; //引入全局less文件

  .receive {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    margin: 0 0 40px;
    border-radius: 0 0 6px 6px;

    .search {
      width: 270px;
      height: 30px;
      margin-left: 20px;

      >input {
        background: rgba(240, 242, 245, 1);
        border: none;
      }
    }

    .el-tabs__nav-scroll {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dgg-search {
      margin-left: 30px;
      cursor: pointer;
    }

    .icon_info {
      cursor: pointer;
      margin-right: 30px;
      line-height: 30px;
    }

    .tabs-item-head {
      font-size: 0;
      min-height: 70px;
      padding: 20px 0px;
    }

    .receive-body {
      padding: 0 10px;
    }

    .receive-button {
      border-radius: 4px;
      border: 1px solid rgba(16, 187, 184, 1);
    }

    .receive-radio {
      margin-right: 30px;
    }

    .service-name-sate {
      width: 50px;
      height: 18px;
      border-radius: 10px;
      border: 1px solid rgba(241, 9, 64, 1);
      color: #f10940;
      font-size: 12px;
      padding: 0 6px;
      box-sizing: border-box;
    }

    .service-name-lable {
      width: 350px;
      display: inline-block;
      font-size: 14px;
      font-weight: 400;
      color: rgba(25, 35, 60, 1);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .service-name-cumtorName {
      font-size: 13px;
      font-weight: 400;
      color: rgba(147, 152, 161, 1);
      margin-top: 10px;
    }

    .el-radio-button {
      width: 60px;

      >input {
        width: 60px;
      }

      >span {
        width: 60px;
      }
    }

    .icon_info {
      cursor: pointer;
      margin-right: 30px;
      line-height: 30px;
    }

    /deep/ .el-form {
      .el-form-item {
        font-size: 14px;
        text-align: center;

        .el-form-item__label {
          float: none !important;
          line-height: 30px;
        }

        .el-form-item__content {
          float: none !important;
          display: inline-block;
        }

        .el-textarea {
          width: 175px;
        }
      }
    }

    .el-textarea .el-input__count {
      line-height: 1;
    }
  }

  .receiveDialog-alert {
    .el-from {
      width: 100%;
    }

    .el-form-item {
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      align-items: center;

      &.choose-people {
        position: relative;

        .project-people-dialog {
          position: absolute;
        }

        .show-transactor-people {
          display: inline-block;
          width: 26px;
          height: 26px;
          position: relative;
          font-size: 0;
          vertical-align: top;

          &:hover {
            .dgg-icon {
              display: inline;
            }
          }

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: relative;
          }

          .dgg-icon {
            display: none;
            position: absolute;
            top: 0px;
            right: -8px;
            cursor: pointer;
          }
        }

        .show-transactor-name {
          display: inline-block;
          vertical-align: middle;
          max-width: 200px;
          .dgg-text-ellip;
        }

        .project-people-dialog {
          width: 282px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 2px 19px 0px #dadde6;
          border-radius: 4px;
          z-index: 35;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 40px;

          .infinite-list {
            max-height: 300px;
            padding: 0 15px;
            padding-top: 20px;
            text-align: left;

            >li {
              width: 100%;
              font-size: 14px;
              color: #19233c;
              line-height: 20px;
              margin: 0 0 20px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              &.active-product-list {
                color: #10bbb8;
              }

              .dgg-text-ellip;

              &:hover {
                color: #10bbb8;
                cursor: pointer;
              }

              span {
                display: inline-block;
                .dgg-text-ellip;

                &:first-child {
                  max-width: 60px;
                  flex-shrink: 0;
                }

                &:last-child {
                  flex: 1;
                  text-align: right;
                  padding-left: 14px;
                }
              }
            }
          }

          .tab-top {
            width: 100%;

            span {
              display: inline-block;
              width: 50%;
              text-align: center;
              height: 30px;
              line-height: 30px;
              font-size: 14px;
              color: #666873;
              font-weight: 500;
              border-bottom: 2px solid #e3e4e6;
              cursor: pointer;
            }

            .this-btn,
            span:hover {
              color: #10bbb8;
              border-color: #10bbb8;
            }
          }

          .dgg-order-search {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #edeff0;

            .el-input__inner {
              height: 30px;
              line-height: 30px;
              background: none !important;
              border: 1px solid #e3e4e6 !important;
            }
          }

          .no-data {
            max-width: 100%;
            text-align: center;
          }
        }
      }

      .addTransactor {
        color: #c8cfdb;
        vertical-align: middle;
        cursor: pointer;
      }

      >label {
        vertical-align: middle;
        width: 100px;
        text-align: right;
        flex-shrink: 0;
      }

      .el-form-item__content {
        flex: 1;
        text-align: left;

        p {
          max-width: 200px;
          text-align: left;

          .dgg-text-ellip;
        }
      }
    }
  }
</style>